<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>已卖出商品</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/common.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/mui.min.css"/>
</head>
<style type="text/css">
    body {
        font-size: 14px;
    }

    .aui-content-padded {
        margin: 0 10px;
        padding: 10px 0;
    }

    /*.noFriend{
        font-size: 12px;
    }
    .addFriend{
        padding:5px 8px;
        color:#327afa;
    }
    */
    .addFriend.aui-border:after {
        border-color: #327afa;
    }

    .orderList {
        margin-bottom: 15px;
    }

    .proTitle {
        font-size: 14px;
        line-height: 17px;
        color: #8f8f94;
    }

    .proTitleP {
        margin: 8px 0 !important;
    }

    .proList.aui-list-view .aui-img-object {
        max-width: 70px;
        height: 70px;
        line-height: 70px;
    }

    .orderTitle {
        font-size: 14px;
        padding: 10px;
        background: #fff;
    }

    .proPrice {
        text-align: right;
        margin-top: 5px;
    }

    .proList.aui-list-view {
        margin: 0;
    }

    .aui-list-view:after {
        border: none;
    }

    .totalPrice {
        font-size: 18px;
    }

    .proFooter .aui-list-view-cell {
        text-align: right;
    }

    .proMoreHandle {
        overflow: inherit;
        height: 55px;
    }

    .proMoreHandle span {
        float: right;
        display: block;
        padding: 5px 8px;
        border-radius: 5px;
        margin-right: 8px;
    }

    .proMoreHandle span.active.aui-border:after {
        border-color: #327afa;
    }

    .proMoreHandle .aui-border:after {
        border-radius: 5px;
    }

    .more {
        position: relative;
        /*margin-right: 0 !important;*/
    }

    .more a {
        color: #000;
    }

    .moreList {
        /*left: -28px;*/
        background: #FFF;
        border-radius: 5px;

    }

    .moreList li {
        padding: 5px 8px;
        width: 100px;
        text-align: center;
    }

    .mui-popover {
        width: 100px;
    }
</style>
<body>
<div class="contain orderLists">
    <!-- 等待买家付款 -->
    <div class="orderList">
        <div class="orderTitle myBorder">
            <span class="comName">苏州市素絮服饰有限公司</span>
            <span class="orderStatus zfBlue aui-pull-right">等待买家付款</span>
        </div>
        <ul class="aui-list-view proList" tapmode onclick="openToTwo('orderInfo')">
            <li class="aui-list-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                <div class="aui-img-body proTitle  aui-col-xs-6">
                    <p class="aui-ellipsis-2 proTitleP">图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略</p>
                    <span class="proColor">藏青</span>
                    <span class="proSize">均码</span>
                </div>

                <div class="aui-img-body proPrice">
                    <span>￥53.60</span>
                    <p>x1</p>
                </div>
            </li>
            <li class="aui-list-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                <div class="aui-img-body proTitle  aui-col-xs-6">
                    <p class="aui-ellipsis-2 proTitleP">图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略</p>
                    <span class="proColor">藏青</span>
                    <span class="proSize">均码</span>
                </div>

                <div class="aui-img-body proPrice">
                    <span>￥53.60</span>
                    <p>x1</p>
                </div>
            </li>
            <li class="aui-list-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                <div class="aui-img-body proTitle  aui-col-xs-6">
                    <p class="aui-ellipsis-2 proTitleP">图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略</p>
                    <span class="proColor">藏青</span>
                    <span class="proSize">均码</span>
                </div>

                <div class="aui-img-body proPrice">
                    <span>￥53.60</span>
                    <p>x1</p>
                </div>
            </li>
        </ul>
        <div class="proFooter">
            <ul class="aui-list-view">
                <li class="sendLink aui-list-view-cell">
                    共2件 总金额:￥<span class="totalPrice">107.20</span>(含运费 ￥10.00)
                </li>
                <li class="aui-list-view-cell proMoreHandle">
                    <span class="aui-border">联系买家</span>
                </li>
            </ul>
        </div>
    </div>
    <!-- 买家已付款 -->
    <div class="orderList">
        <div class="orderTitle myBorder">
            <span class="comName">苏州市素絮服饰有限公司</span>
            <span class="orderStatus zfBlue aui-pull-right">买家已付款</span>
        </div>
        <ul class="aui-list-view proList" tapmode onclick="openToTwo('orderInfo')">
            <li class="aui-list-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                <div class="aui-img-body proTitle  aui-col-xs-6">
                    <p class="aui-ellipsis-2 proTitleP">图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略</p>
                    <span class="proColor">藏青</span>
                    <span class="proSize">均码</span>
                </div>

                <div class="aui-img-body proPrice">
                    <span>￥53.60</span>
                    <p>x1</p>
                </div>
            </li>
        </ul>
        <div class="proFooter">
            <ul class="aui-list-view">
                <li class="sendLink aui-list-view-cell">
                    共2件 总金额:￥<span class="totalPrice">107.20</span>(含运费 ￥10.00)
                </li>
                <li class="aui-list-view-cell proMoreHandle">
                    <span class="active aui-border">确认发货</span>
                    <span class="aui-border">联系买家</span>
                </li>
            </ul>
        </div>
    </div>
    <!-- 卖家已发货 -->
    <div class="orderList">
        <div class="orderTitle myBorder">
            <span class="comName">苏州市素絮服饰有限公司</span>
            <span class="orderStatus zfBlue aui-pull-right">卖家已发货</span>
        </div>
        <ul class="aui-list-view proList" tapmode onclick="openToTwo('orderInfo')">
            <li class="aui-list-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                <div class="aui-img-body proTitle  aui-col-xs-6">
                    <p class="aui-ellipsis-2 proTitleP">图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略</p>
                    <span class="proColor">藏青</span>
                    <span class="proSize">均码</span>
                </div>

                <div class="aui-img-body proPrice">
                    <span>￥53.60</span>
                    <p>x1</p>
                </div>
            </li>
        </ul>
        <div class="proFooter">
            <ul class="aui-list-view">
                <li class="sendLink aui-list-view-cell">
                    共2件 总金额:￥<span class="totalPrice">107.20</span>(含运费 ￥10.00)
                </li>
                <li class="aui-list-view-cell proMoreHandle">
                    <span class="aui-border">查看物流</span>
                    <span class="aui-border">联系买家</span>
                    <!-- <span>更多</span> -->
                </li>
            </ul>
        </div>
    </div>
    <!-- 交易成功 -->
    <div class="orderList">
        <div class="orderTitle myBorder">
            <span class="comName">苏州市素絮服饰有限公司</span>
            <span class="orderStatus zfBlue aui-pull-right">交易成功</span>
        </div>
        <ul class="aui-list-view proList" tapmode onclick="openToTwo('orderInfo')">
            <li class="aui-list-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                <div class="aui-img-body proTitle  aui-col-xs-6">
                    <p class="aui-ellipsis-2 proTitleP">图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略</p>
                    <span class="proColor">藏青</span>
                    <span class="proSize">均码</span>
                </div>
                <div class="aui-img-body proPrice">
                    <span>￥53.60</span>
                    <p>x1</p>
                </div>
            </li>
        </ul>
        <div class="proFooter">
            <ul class="aui-list-view">
                <li class="sendLink aui-list-view-cell">
                    共2件 总金额:￥<span class="totalPrice">107.20</span>(含运费 ￥10.00)
                </li>
                <li class="aui-list-view-cell proMoreHandle">
                    <span class="aui-border active">评价</span>
                    <span class="aui-border">查看物流</span>
                    <span class="more">
                            <!-- 这个a锚点链接对应下面的id ，后面可以加上订单的id-->
                            <a href="#bottomPopover">更多</a>
                       </span>
                </li>
            </ul>
            <!-- 这个id对应上面的a锚点链接 ，后面可以加上订单的id-->
            <div id="bottomPopover" class="mui-popover mui-popover-bottom ">
                <div class="mui-popover-arrow"></div>
                <ul class="moreList aui-border">
                    <li tapmode onclick="hidePopover()">删除订单1</li>
                    <li tapmode onclick="hidePopover()">删除订单</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 交易关闭 -->
    <div class="orderList">
        <div class="orderTitle myBorder">
            <span class="comName">苏州市素絮服饰有限公司</span>
            <span class="orderStatus zfBlue aui-pull-right">交易关闭</span>
        </div>
        <ul class="aui-list-view proList" tapmode onclick="openToTwo('orderInfo')">
            <li class="aui-list-view-cell aui-img">
                <img class="aui-img-object aui-pull-left" src="../../image/shili.jpg">
                <div class="aui-img-body proTitle  aui-col-xs-6">
                    <p class="aui-ellipsis-2 proTitleP">图文列表缩略图在左边的样式，默认大小为80PX，文字介绍内容可以为一行也可以为两行，超出部分自动省略</p>
                    <span class="proColor">藏青</span>
                    <span class="proSize">均码</span>
                </div>

                <div class="aui-img-body proPrice">
                    <span>￥53.60</span>
                    <p>x1</p>
                </div>
            </li>
        </ul>
        <div class="proFooter">
            <ul class="aui-list-view">
                <li class="sendLink aui-list-view-cell">
                    共2件 总金额:￥<span class="totalPrice">107.20</span>(含运费 ￥10.00)
                </li>
                <li class="aui-list-view-cell proMoreHandle">
                    <span class="aui-border">联系买家</span>
                    <span class="aui-border">删除订单</span>
                    <span class="more">
                            <!-- 这个a锚点链接对应下面的id，后面可以加上订单的id -->
                            <a href="#bottomPopover1">更多</a>
                       </span>
                </li>
            </ul>
            <!-- 这个id对应上面的a锚点链接 -->
            <div id="bottomPopover1" class="mui-popover mui-popover-bottom ">
                <div class="mui-popover-arrow"></div>
                <ul class="moreList aui-border">
                    <li tapmode onclick="hidePopover()">删除订单12</li>
                    <li tapmode onclick="hidePopover()">删除订单</li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/jquery-1.11.3.js"></script>
<script type="text/javascript" src="../../script/mui.js"></script>
<script type="text/javascript">

    apiready = function () {
        myAvatar = $api.getStorage('avatar');
        targetId = api.pageParam.targetId;
        targetAvatar = api.pageParam.targetAvatar;
        targetNickname = api.pageParam.targetNickname;
        api.parseTapmode();
    }

    mui.init({
        swipeBack: true //启用右滑关闭功能
    });
    function hidePopover() {
        mui('.mui-popover').popover('hide');
        api.execScript({
            name: "my/sellerOrderList_win",
            script: "closeMask()"
        })
    }

    mui('body').on('shown', '.mui-popover', function (e) {
        api.execScript({
            name: "my/sellerOrderList_win",
            script: "showMask()"
        })
    });

    mui('body').on('hidden', '.mui-popover', function(e) {
        api.execScript({
            name: "my/sellerOrderList_win",
            script: "closeMask()"
        })
    });

</script>
</html>